// 客户详情
<template>
  <div class="body">
    <div class="header">
      <div
        class="headers"
        @click="goOff()"
      >
        <i class="el-icon-arrow-left"></i>客户详情
      </div>
      <div class="headerl">
        <img :src="detailList.head_pic" alt="" />
      </div>
      <div class="headerr">
        <div class="headerr_top">
          <ul>
            <li>昵称：{{detailList.nickname}}</li>
            <li>客户编号：3053655</li>
            <li>成为客户时间：{{detailList.reg_time}}</li>
          </ul>
        </div>
        <div class="headerr_bottom">
          <ul>
            <li>
              <button @click="frozen('0')" class="mouse_allowed" v-if="detailList.is_lock==0">冻结客户</button>
              <button @click="frozen('1')" class="mouse_allowed" v-else>解除冻结</button>

            </li>
          </ul>
          <ul>
            <li><button @click="ModifyBut('0')">修改积分</button></li>
          </ul>
          <ul>
            <li><button @click="couponP">送优惠券</button></li>
          </ul>
          <ul>
            <li><button @click="ModifyBut('1')">修改余额</button></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="contentl">
        <div class="contertl_top">消费信息</div>
        <div class="contertl_bottom">
          <div class="contertl_bottomi">
            <div class="bottomi_ul">
              <span>最近消费</span>
              <ul>
                <li>最近消费时间：2022-03-05</li>
                <li>最近消费金额：￥500.00</li>
              </ul>
            </div>
            <div class="bottomi_ul">
              <span>累计消费&售后</span>
              <ul>
                <li>总消费金额：￥5500.00</li>
                <li>总消费次数：5次</li>
                <li>总售后金额：￥0.00</li>
                <li>总售后次数：0次</li>
              </ul>
            </div>
          </div>
          <div class="contertl_bottomri"></div>
        </div>
      </div>
      <div class="contentr">
        <div class="contertl_top">账户资产</div>
        <div class="contertl_bottom">
          <div class="contertl_bottomi">
            <div class="bottomi_ul">
              <span>储值账户</span>
              <ul>
                <li>当前余额：￥{{detailList.user_money}}</li>
                <li>累计余额：￥0.00</li>
                <li>充值金额：￥0.00</li>
                <li>冻结余额：￥{{detailList.frozen_money}}</li>
              </ul>
            </div>
            <div class="bottomi_ul">
              <span>积分</span>
              <ul>
                <li>当前积分：0</li>
                <li>累计积分：0</li>
                <li>冻结积分：0</li>
              </ul>
            </div>
            <div class="bottomi_ul" style="margin-right: 0px">
              <span>优惠券</span>
              <ul>
                <li>未使用：{{detailList.coupon_not_used}}张</li>
                <li>已过期：{{detailList.coupon_used}}张</li>
                <li>已使用：{{detailList.coupon_expired}}张</li>
              </ul>
            </div>
          </div>
          <div class="contertl_bottomri"></div>
        </div>
      </div>
    </div>
    <div class="contentlist">
      <ul>
        <!-- <li>基本信息</li>
        <li class="checked_li">交易明细</li>
        <li>积分明细</li> -->
        <li v-for="(item,index) in tab" :key="index" :class="{checked_li:index==num}" @click="tabber(index)">
          {{item.text}}
        </li>
      </ul>
    </div>
    <div v-if="num==0" class="footer">
      <div class="info">
        <p><span class="span">姓名：</span>{{detailList.nickname}}</p>
        <p><span class="span">性别：</span><span v-if="detailList.sex==0">保密</span><span v-if="detailList.sex==1">男</span><span v-if="detailList.sex==2">女</span></p>
        <p><span class="span">年龄：</span>年龄</p>
        <p><span class="span">生日：</span>{{detailList.birthday}}</p>
        <p><span class="span">手机号：</span>{{detailList.mobile}}</p>
        <p><span class="span">地址：</span>{{detailList.city}}</p>
        <p><span class="span">身份证号：</span>{{detailList.mobile}}</p>
      </div>
    </div>
    <div class="footer" v-if="num==1">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          prop="time"
          label="交易时间"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="oddnumbers" label="交易单号" align="center">
        </el-table-column>
        <el-table-column prop="source" label="交易来源" align="center">
        </el-table-column>
        <el-table-column
          prop="subtotal"
          label="金额小记"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="reduction"
          label="优惠减免"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="integralDeduction"
          label="积分抵扣"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="balanceDeduction"
          label="余额抵扣"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="payment"
          label="实付款"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="mode" label="支付方式" align="center">
        </el-table-column>
      </el-table>
    </div>
    <div v-if="num==2" class="footer">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          prop="time"
          label="交易时间"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="oddnumbers" label="交易类型" align="center">
        </el-table-column>
        <el-table-column prop="source" label="变动积分" align="center">
        </el-table-column>
        <el-table-column
          prop="subtotal"
          label="剩余积分"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="reduction"
          label="备注"
          width="180"
          align="center"
        >
        </el-table-column>
      </el-table>
    </div>
    
    <CustomerFrozen ref="Popup" :user_ids="user_id"></CustomerFrozen>
    <Customerthaw :user_ids="user_id" ref="Popups"></Customerthaw><!-- 解除冻结对话框 -->
    <CustomerModify ref="Modify" :stys='sty' :user_id="user_id"></CustomerModify><!-- 修改积分、余额对话框 -->
    <CustomerCoupon ref="Coupon"></CustomerCoupon>
  </div>
</template>

<script>
import CustomerFrozen from "./CustomerFrozen.vue"; // 冻结账户对话框
import Customerthaw from "./Customerthaw.vue"; // 解除冻结账户对话框
import CustomerModify from "./CustomerModify.vue";//修改积分、余额对话框
import CustomerCoupon from "./CustomerCoupon.vue"; // 送优惠券对话框
export default {
  components: {
    CustomerFrozen,
    CustomerCoupon,
    Customerthaw,
    CustomerModify
  },
  data() {
    return {
      user_id:"",//客户列表传来的id
      sty:'',//用于判断修改积分与修改余额弹框
      mobile:'',
      detailList:[],
      tab:[
        {text:"基本信息"},
        {text:"交易明细"},
        {text:"积分明细"},
      ],
      num:0,
      tableData: [
        {
          time: "2021-03-05",
          oddnumbers: "53672021503105",
          source: "小程序",
          subtotal: "￥50.00",
          reduction: "￥0.00",
          integralDeduction: "￥0.00",
          balanceDeduction: "￥0.00",
          payment: "￥50.00",
          mode: "微信支付",
        },
        {
          time: "2021-03-05",
          oddnumbers: "53672021503105",
          source: "小程序",
          subtotal: "￥50.00",
          reduction: "￥0.00",
          integralDeduction: "￥0.00",
          balanceDeduction: "￥0.00",
          payment: "￥50.00",
          mode: "微信支付",
        },
        {
          time: "2021-03-05",
          oddnumbers: "53672021503105",
          source: "小程序",
          subtotal: "￥50.00",
          reduction: "￥0.00",
          integralDeduction: "￥0.00",
          balanceDeduction: "￥0.00",
          payment: "￥50.00",
          mode: "微信支付",
        },
      ],
    };
  },
  methods: {
    //返回上一页
    goOff() {
      this.$router.back();
    },
    // 冻结用户-对话框
    frozen(is_lock) {
      if(is_lock==1){
        this.$refs.Popups.centerDialogVisible = true;
      }else{
        this.$refs.Popup.centerDialogVisible = true;
      }
    },
    //修改积分、余额对话框
    ModifyBut(sty){
      this.sty = sty
      if(sty==0){
        this.$refs.Modify.centerDialogVisible = true;
      }else{
        this.$refs.Modify.centerDialogVisible = true;
      }
    },
    // 送优惠券-对话框
    couponP() {
      this.$refs.Coupon.centerDialogVisible = true;
    },
    //接受参数
    user(){
      this.mobile = this.$route.query.mobile
      this.user_id = this.$route.query.user_id
    },
    //客户详情列表and积分明细
    list(){
      this.$axios({
        method: 'post',
        url:'/user/user_list',
        params:{
          id:this.user_id
        }
      })
      .then((res) => {
        this.detailList = res.data.data
        this.tableData = res.data.data
        console.log(res,"用户详情列表")
      })
      //积分明细
      this.$axios({
        method: 'post',
        url:'/user/user_integral_list',
        params:{
          id:this.user_id
        }
      })
      .then((res) => {
        this.tableData = res.data.data
        console.log(res,"积分明细")
      })

    },
    //选项卡切换
    tabber(index){
      this.num = index
    }
  },
  created(){
    this.user()//接收参数方法
    this.list()//列表
  },
};
</script>

<style src="../../components/css/customer_css/customerdetails.css" scoped></style>
<style scoped>
</style>